<template>
    <div>
        <van-nav-bar title="商品搜索" left-arrow @click-left="() => { $router.push('/') }" />
        <van-search v-model="search_name" show-action label="东京" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <div v-show="status">
            <div>
                <h3 style="color: gainsboro; margin: 10px;">热门搜索</h3>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">高邦</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">充气娃娃</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">杜蕾斯</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">001</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">狼牙t</span>
            </div>
            <div>
                <h3 style="color: gainsboro; margin: 10px;">历史记录</h3>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">123.com</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">黑丝</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">情趣</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">123.com</span>
                <span
                    style="display: inline-block; width: 80px; height: 35px; background-color: gainsboro; border-radius: 15px; line-height: 35px; text-align: center; margin: 10px;">f杯子</span>
            </div>
        </div>
        <div>
            <div v-if="gujia">
                <van-skeleton title :row="30" />
            </div>
            <div v-show="!status" v-else>
                <van-cell-group v-for="item in searchData">
                    <van-cell :title="item.goods_name" />
                </van-cell-group>

            </div>
            <div v-show="search_null">
                <van-empty image="search" description="🫵🤡您搜索的数据没有,那没办法👐" />
            </div>
        </div>


    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
import _ from 'lodash';

const searchData = ref([])
let search_name = ref('')
let status = ref(true)
let gujia = ref(false)
let search_null = ref(false)
watch(search_name, _.debounce((value) => {
    console.log('搜索数据', value);
    if (value.length == 0) {
        status.value = true
        search_null.value = false
    }
    else {
        status.value = false
        qsearchApi(value).then(res => {
             searchData.value = res.data.message
            if (searchData.value.length == 0) {
                search_null.value = true
            }
            gujia.value = true
            console.log('搜索数据', res);
           
        })
    }
}, 1000))

setInterval(() => {
    gujia.value = false
}, 1000)
</script>

<style lang="scss" scoped></style>